<template>
    <view>
  
      <view class="mask-home-img-container" :class="{ 'mask-home-img-fade-out': !showMask && animating }"
        v-if="showMask || animating" @tap="closeMask">
        <view class="mask-home-img-content" :class="{ 'mask-home-img-content-fade-out': !showMask && animating }"
          @tap.stop>
          <image src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173581476767766e6f6c74c.png"
            mode="widthFix" class="mask-home-img-promo" @click="handlerTodescribe" />
          <view class="feiIconfont icon-airline_close mask-home-img-close-btn" @tap="closeMask"></view>
        </view>
      </view>
  
  
  
  
      <qh-tabbar-page-view :showNavbar="false" bgColor="var(--primary-color)">
        <view class="header_img" :style="{ opacity: opacity }"></view>
        <view class="fixed-header">
          <uni-status-bar></uni-status-bar>
          <view style="
            text-align: left;
            font-weight: 550;
            padding: 0 32rpx;
            height: 88rpx;
            line-height: 88rpx;
            font-size: 40rpx; 
          ">
            <img style="width: 370rpx; height: 68rpx" :src="!isTop
              ? 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667b83489f37d9269.png'
              : 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a8e70489f07484.png'
              " alt="" />
          </view>
  
          <view style="display: flex; justify-content: space-between; padding: 24rpx">
            <view style="display: flex; justify-content: center; align-items: center">
              <view @click="getLocal" style="
                background-color: #fff;
                width: 180rpx;
                height: 100%;
                border-radius: 16px;
                display: flex;
                align-items: center;
                border: 1px solid #f5f5f5;
              ">
                <text style="font-size: 16px; margin: 0px 0px 0px 5px"
                  class="qh-rt-single qh-rt-weizhi2 choose-position-icon"></text>
                <text class="address_ellipsis">{{ userPosition }}</text>
              </view>
            </view>
  
            <view style="width: 100%" class="search-box flex-cn" @click="toSearchGoods">
              <text class="qh-rt-single qh-rt-a-zu2432 search-icon"></text>
              <text class="search-text">请输入商品名称</text>
              <view class="search-button">搜索</view>
            </view>
          </view>
        </view>
  
  
        <view class="flex-column width-height-100 flex-column-100">
          <view class="flex-column-100" style="background-color: var(--primary-color)">
            <view class="scroll-view home-box tabbar-page-bottom">
              <view class="width-height-100 home-content">
  
                <qh-scroll-view @scroll="onScroll" style="overflow-y: scroll" :lowerThreshold="50"
                  parent-el-name=".home-content" @init="initScroll" @scrolltolower="getGoodsList"
                  :lowerTriggered="isLoading" refresher-enabled @refresherrefresh="pullDownRefresh"
                  :refresher-triggered="isRefresh" :loaded="goodsList.length >= 5 && !isLoading && !canLoad"
                  :empty="!goodsList.length && !isLoading && !canLoad">
                  <view class="banner-box">
                    <view class="banner-bg"></view>
                    <swiper class="banner-swipper" :indicator-dots="true" :current="current" :autoplay="true"
                      indicator-color="#fff" indicator-active-color="red" :interval="3000" :duration="1000">
                      <swiper-item style="position: absolute; left: 18rpx; top: 0rpx" class="swiper-item"
                        v-for="(item, index) in bannerList" :key="index">
                        <image @click="navTo(item)" :src="item.image_url"></image>
                      </swiper-item>
                    </swiper>
                  </view>
  
                  <view class="notice-container">
                    <view class="notice-content">
                      <!-- 公告消息 -->
                      <text class="feiIconfont icon-gonggao"></text>
                      <!-- Animated Notice Text -->
                      <swiper class="notice-swiper" vertical :autoplay="true" :interval="3000" :duration="1000"
                        :circular="true">
                        <swiper-item v-for="(item, index) in noticeList" :key="index">
                          <view class="notice-item" @click="handleNoticeClick(item)">{{ item.content }}</view>
                        </swiper-item>
                      </swiper>
                    </view>
                  </view>
  
                  <!-- <view style="width: 100%; overflow: hidden; padding: 0 16rpx">
                    <scroll-view class="home_icon" scroll-x="true" style="white-space: nowrap; border-radius: 16rpx">
                      <view v-for="(list, index) in navList[1]" class="min_cion" :key="index">
                        <img :src="list.image_url" alt="" @click="toGoodsList(list, index, '2')" />
                        <view class="font_icon">{{ list.class_name }}</view>
                      </view>
  
                      <view class="min_cion">
                        <img src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/66271b455dde16641.png" alt=""
                          @click="toGoodsList(navList[0], -1, '更多')" />
                        <view class="font_icon">更多</view>
                      </view>
                    </scroll-view>
                  </view>-->
  
                  <view class="home_class backGround">
                    <!--  新年的分类标签  -->
                    <defineNewYear :categories="categories_list" :navItems="navItems_list"
                      @category-click="toGoodsList" />
  
                    <view style="
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      padding: 0 16rpx;
                      position: relative;
                      height: 166rpx;
                      margin-top: 20rpx;
                    " @click="handlerToCategory()">
                      <!-- <img style="width: 100%; height: 300rpx"
                          src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17355677756772a99f19ea4.png"
                          alt="" /> -->
                      <img style="width: 100%; height: 166rpx"
                        src="https://safood.supplyocta.com/Uploads/Admin/ImageGallery/2025-01-17/678a1fa6db37c9012.png"
                        alt="" />
                    </view>
  
  
  
  
                    <view style="
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      padding: 0 16rpx;
                      position: relative;
                      height: 300rpx;
                      margin-top: 20rpx;
                    " @click="handlerVipUser()">
                      <!-- <img style="width: 100%; height: 300rpx"
                          src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17355677756772a99f19ea4.png"
                          alt="" /> -->
                      <img style="width: 100%; height: 300rpx"
                        src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17358048296776479d40d99.png"
                        alt="" />
  
                      <image class="animated-image"
                        src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173579038267760f2eef12c.png"
                        alt="Animated Image" />
                    </view>
  
                    <view class="ney-container">
                      <view class="left-content" @click="handlerGroupBuying">
                        <image
                          src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734937069676909edc7d26.png"
                          mode="aspectFit"></image>
                      </view>
                      <view class="right-content" @click="handlerTodescribe">
                        <image
                          src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173493731067690ade28a2b.png"
                          mode="aspectFit"></image>
                      </view>
                    </view>
  
  
                    <view style="
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      padding: 0 16rpx;
                      position: relative;
                      background-color: #FFF7F0;
                      height: 100rpx;
                    ">
                      <view style="display: flex; align-items: center">
                        <img style="width: 88rpx; height: 28rpx"
                          src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a80053f8388835.png"
                          alt="" />
                        <text style="
                          font-size: 36rpx;
                          font-weight: bold;
                          margin: 0 20px;
                        ">热卖精选</text>
                        <img style="width: 88rpx; height: 28rpx"
                          src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a80053f8388835.png"
                          alt="" />
                      </view>
  
                      <!-- <text @click="handlerMore()" style="  
                        position: absolute;
                        right: 16rpx;
                        font-size: 24rpx;
                        color: #9e9e9e;
                      ">更多
                        <text style="font-size: 12px" class="feiIconfont icon-youzhibiao-"></text></text> -->
                    </view>
  
  
                    <view class="new-lable-container">
                      <view class="new-lable-grid">
                        <view class="new-lable-item" v-for="(item, index) in categoryList" :key="index">
                          <image :src="item.headerImg" mode="aspectFill" @tap="handleItemClick(item)" />
                        </view>
                      </view>
                    </view>
  
                    <view style="
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      padding: 0 16rpx;
                      position: relative;
                      background-color: #FFF7F0;
                      height: 100rpx;
                      margin-bottom: 20rpx;
                    " @click="handlerMore()">
                      <img style="width: 278rpx; height: 64rpx"
                        src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173556466867729d7c2ad0e.png"
                        alt="" />
                    </view>
  
  
  
                    <defineSincereGift />
  
  
  
                    <defineSelected :productList="defineSelected_list" :showTitle="true" :priceLabel="''"
                      :buttonText="'立即购买'" />
  
                    <!-- goodsInfo 瀑布流 -->
                    <!-- <waterfallsFlow ref="WaterfallRef" :alertToggle="alertToggle" @updateSKU="generateSKU"
                      :wfList="goodsList" :updateNum="goodsPage"></waterfallsFlow>-->
                  </view>
                  <!---->
                </qh-scroll-view>
  
                <!-- <SkuDetailsCard ref="popupComponent" :goodsinfo="goods" :discount="0"></SkuDetailsCard> -->
              </view>
            </view>
          </view>
        </view>
      </qh-tabbar-page-view>
  
    </view>
  </template>
  
  <script>
  
  const app = getApp().globalData;
  import qhScrollMixin from "@/components/qh-scroll-view/mixins.js";
  import SkuDetailsCard from "@/components/skuDetails/skuDetails.vue";
  import defineNewYear from "./components/define_new_year.vue";
  import defineMock from "./components/define_mock.js";
  import defineSincereGift from "./components/define_sincere_gift.vue";
  import defineSelected from "./components/define_selected.vue";
  export default {
    components: {
      SkuDetailsCard,
      defineNewYear,
      defineSincereGift,
      defineSelected
    },
    mixins: [qhScrollMixin], // 使用mixin
    props: {
      bottomNavigation: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        categories: defineMock.categories,
        navItems: defineMock.navItems,
        categories_list: [],
        navItems_list: [],
        defineSelected_list: [],
        categoryList: defineMock.fourCategories,
        noticeList: [
          // { id: 3, content: '时福全球购春节期间暂停发货公告。' },
          { id: 1, content: '福气值积分说明必读哦！不看后悔系列~' },
          { id: 2, content: '从今日直至春节期间，时福小程序专注年货，只为您供应。' },
        ],
        label_List: defineMock.label_List,
        tags: ["空气炸锅", "外酥里嫩", "藤椒风味"], // 标签数组,
        progress: 92,
        // goodsChecked: [],
        listLabel: [], //标签列表
        listPrice: [], //今日特价优惠
        // btnClass: true,
        // animations: [],
        canClick: true,
        // animationIndex: null,
        indexes: [],
        isRefresh: false,
        bannerList: [], //轮播图列表
        navList: [], //分类导航列表
        actLabelId: "", //选中的标签id
        labelList: [], //标签列表
        goodsList: [], //商品列表
        goodsPage: 1, //商品分页页码
        goodsLimit: 10, //商品分页每页条数
        canLoad: true, //是否允许继续加载商品
        userType: 1, //用户身份
        sku: {}, //规格弹窗需要的参数信息
        goods: {}, //规格的商品信息
        isLoading: false, //是否正在加载商品
        // backgroundColor: '#E4FCC3', //背景色
        userPosition: "", //用户当前的位置
        longitude: "",
        latitude: "",
        isTop: true, // 用于标记是否在顶部
        opacity: 1,
        moreIndex: null,
        showMask: true,
        animating: false
      };
    },
    watch: {
      showMask(val) {
        if (val) {
          uni.hideTabBar()
        } else {
          this.animating = true
          setTimeout(() => {
            this.animating = false
            uni.showTabBar()
          }, 300)
        }
      }
    },
    computed: {
      badgeText() {
        return this.$store.merShoppingGoodsList.length;
      },
      footerStyle() {
        let h = this.$store.bottomHeight + 110;
        return (
          "height:" + h + "rpx;padding-bottom:" + this.$store.bottomHeight + "rpx"
        );
      },
      skuBoxStyle() {
        return "margin-bottom:" + (this.$store.bottomHeight + 110) + "rpx";
      },
      showIntegral() {
        return (
          this.$store.integral_arrive_cash == 1 &&
          this.$store.marketing_methods == 2
        );
      },
    },
    beforeDestroy() {
      uni.showTabBar()
    },
  
    methods: {
      //跳转分类的页面
      handlerToCategory() {
        uni.navigateTo({
          url: `/pages/mer/goods/search/search?mycoupon=3&class_id=${898}`
        })
      },
  
      handlerVipUser() {
        uni.navigateTo({
          url: '/pages/mer/tabbar/home/components/define_template/components/vip_user_center'
        })
      },
  
      // 轮播跳转
      navTo(val) {
        if (val.id == '20') {
          uni.navigateTo({
            url: val.url
          })
        } else {
          uni.navigateTo({
            url: '/pages/mer/tabbar/home/components/define_template/components/year_group_buying?label_id=' + val.label_id
          })
        }
        console.log(val, '123123')
      },
  
  
      async getNavListNew() {
        try {
          const { status, data } = await this.$request(
            "SmallProgramApi/NewYear/getSecondLevelClass",
            {
              pageSource: 1,
              store_id: this.$store.mallStoreId
            }
          );
  
          if (status !== 1) {
            console.error('Failed to fetch nav list, status:', status);
            return;
          }
  
          if (!Array.isArray(data) || data.length === 0) {
            console.error('Invalid data format received');
            return;
          }
  
          // 处理分类数据
          this.categories_list = data.slice(0, 10).map((item, index) => ({
            ...item,
            icon_new: this.categories[index]?.icon_new || null
          }));
  
          this.navItems_list = data.slice(10).map((item, index) => ({
            ...item,
            icon_new: this.navItems[index]?.icon_new || null
          }));
  
        } catch (error) {
          console.error('Error in getNavList:', error);
        } 
      },
  
  
      handleNoticeClick(item) {
        switch (item.id) {
          case 1:
            uni.navigateTo({
              url: '/pages/mer/tabbar/home/components/define_template/components/define_describe'
            })
            break;
          case 2:
            uni.navigateTo({
              url: '/pages/mer/tabbar/home/components/define_template/components/notice'
            })
            break;
          case 3:
            uni.navigateTo({
              url: '/pages/mer/tabbar/home/components/define_template/components/new_notice'
            })
            break;
  
          default:
            break;
        }
      },         
  
      handleItemClick(item) {
        // 准备要传递的数据
        // const categoryData = {
        //   id: item.id,
        //   title: item.nameCn,
        //   headerImg: item.image // 如果需要传递头部图片
        // };
        // const encodedData = encodeURIComponent(JSON.stringify(categoryData));
        // uni.navigateTo({
        //   url: `/pages/mer/tabbar/specialDetails/gift_box_details?categoryData=${encodedData}`
        // });
  
        uni.navigateTo({
          url: '/pages/mer/tabbar/home/components/define_template/components/year_group_buying?label_id=' + item.label_id
        })
      },
      handlerGroupBuying() {
        uni.navigateTo({
          url: "/pages/mer/tabbar/home/components/define_template/components/group_buying",
        });
  
      },
  
      handlerTodescribe() {
  
        //   uni.navigateTo({
        //   url: "/pages/mer/goods/details/contact",
        // });
  
  
  
        // uni.navigateTo({
        // 	url: '/pages/mer/login/login_old_users'
        // });
  
        // uni.navigateTo({
        //     url: '/pages/mer/tabbar/home/components/define_template/components/coupons'
        // });
  
        uni.navigateTo({
          url: '/pages/mer/tabbar/home/components/define_template/components/define_describe'
        })
      },
  
      async getDefineSelectedList() {
        const res = await this.$request(
          "SmallProgramApi/NewYear/getHomePageGoodsList",
          { store_id: this.$store.mallStoreId, merchant_id: 1 }
        );
        this.defineSelected_list = res.data
      },
      closeMask() {
        this.showMask = false
      },
      toNewYearSpecial() {
        uni.navigateTo({
          url: '/pages/mer/tabbar/new_year_special/new_year_special'
        })
      },
      handlerShopping() {
        uni.navigateTo({
          url: '/pages/mer/tabbar/new_year_special/new_year_special'
        });
        // uni.navigateTo({
        // 	url: '/pages/mer/tabbar/specialDetails/obj_details'
        // });
        //  uni.navigateTo({
        // 	url: '/pages/mer/tabbar/specialDetails/gift_box_details'
        // });
  
        // uni.navigateTo({
        // 	url: '/pages/mer/tabbar/specialDetails/moeny_details'
        // });
        // uni.navigateTo({
        // 	url: '/pages/mer/tabbar/specialDetails/brand_details'
        // });
        // uni.navigateTo({
        // 	url: '/pages/mer/tabbar/specialDetails/log_details'
        // });
  
  
      },
  
  
      toCoupon(e) {
        uni.navigateTo({
          url: '/pages/mine/mycoupon/mycoupon'
        });
      },
  
      generateSKU(val) {
        if (val.attribute_state == 2) {
          //SKU的
          this.$refs.popupComponent.handlerApply();
  
          val.skuDetailList.forEach((item) => {
            const goodsNum = parseInt(item.goods_num);
            item.disabled = goodsNum <= 0;
          });
          this.goods = val;
        }
      },
      //更新全局购物车
      // updateStoreCar() {
      //   let goodsList = [];
      //   this.goodsList.forEach((item) => {
      //     goodsList.push({
      //       id: item.id,
      //       goods_id: item.goods_id,
      //       sku_id: item.sku_id,
      //       num: item.num,
      //     });
      //   });
      //   this.$store.merShoppingGoodsList = goodsList;
      // },
  
      closeSku() {
        if (this.goodsList.length) {
          let obj = {
            ...this.goodsList[this.changeSkuIndex],
            // sku_id_list: data.sku_id_list,
            // sku_id: data.sku_id,
            // sku_name: data.sku_name,
            // online_price: data.online_price,
            // shop_mem_price: data.shop_mem_price,
            // plus_price: data.plus_price,
            // path: data.image,
          };
          console.log(obj, "1232132132131231");
          //查找购物车中是否含有相同规格的商品
          let index = this.goodsList.findIndex(
            (item) =>
              item.id != obj.id &&
              item.goods_id == obj.goods_id &&
              (!item.sku_id || item.sku_id == obj.sku_id)
          );
          if (index >= 0) {
            //合并购物车
            let oldItem = {
              ...this.goodsList[index],
              num: toDecimal(this.goodsList[index].num * 1 + obj.num),
            };
            this.$set(this.goodsList, index, oldItem);
            this.goodsList.splice(this.changeSkuIndex, 1);
            this.updateStoreCar();
          } else {
            this.$set(this.goodsList, this.changeSkuIndex, obj);
          }
          this.$forceUpdate();
        }
      },
  
      handlerMore() {
        // uni.navigateTo({
        //   url: `/pages/mer/tabbar/categoryLabels/categoryLabels?&index=${-1}&label_id=${this.moreIndex}`,
        // });
  
        uni.navigateTo({
          url: `/pages/mer/tabbar/home/components/define_template/components/define_gift_box`
        });
  
      },
  
      handlerAlert() { },
      //监听他的高度
      onScroll(event) {
        const scrollTop = event.detail.scrollTop;
        this.opacity = Math.max(1 - scrollTop / 100, 0);
        this.isTop = scrollTop <= 100;
        if (scrollTop < 50) this.opacity = 1;
        // console.log(this.opacity  , 'this.opacity')
      },
      //获取地图位置
      getLocal() {
        let obj = {};
        if (this.longitude && this.latitude) {
          obj = {
            longitude: this.longitude,
            latitude: this.latitude,
          };
        }
        uni.chooseLocation({
          ...obj,
          success: (res) => {
            console.log(res);
            uni.setStorageSync("userPositionInfo", res);
            this.userPosition = res.name;
            this.longitude = res.longitude;
            this.latitude = res.latitude;
          },
        });
      },
  
      //今日钜惠
      todayCheap() {
        // console.log('进来了吗')
        // 	uni.navigateTo({
        // 		url: '/pages/mine/gift_home/gift_home'
        // 	})
        // let  id = 1
        //   uni.navigateTo({
        // 		url: '/pages/mine/gift_purchase/gift_purchase?id=' + id + '&store_id=' + this.$root.store_id,
        // 	})
  
        let title = "今日钜惠";
        uni.navigateTo({
          url: `/pages/mer/tabbar/discount/discount?name=${title}&type=1`,
        });
      },
      // 领券
      handlerCoupon() {
        uni.navigateTo({
          url: "/pages/mer/tabbar/coupon/coupon?genre=" + 1,
        });
      },
  
      getDataList() {
        this.$refs.WaterfallRef.upDate();
      },
  
      async onShows() {
        console.log('进来了吗吗？')
        this.reloadData();
        const position = await this.$mutations.getLocation();
        if (position) {
          this.userPosition = position.name;
          this.longitude = position.longitude;
          this.latitude = position.latitude;
        }
  
        uni.setNavigationBarColor({
          // #ifdef MP-WEIXIN
          frontColor: this.$store.primaryBgTextColor,
          // #endif
          backgroundColor: this.$store.primaryBgColor,
        });
      },
  
      //刷新数据
      async reloadData() {
        await this.getDefineSelectedList();
        // await this.getGoodsList();
        await this.getBannerList();
        // await this.getNavList();
        await this.getNavListNew();
        // await this.getLabelList();
        // await this.getPreferential();
        // await this.getLabel();
        if (this.isRefresh) {
          this.isRefresh = false;
          // uni.showToast({
          //      title: '刷新成功',
          //      duration: 800,
          // })
        }
      },
      //跳转到制定分类下的商品
      toGoodsList(item) {
        console.log(item, "item12321321")
  
        const categoryData = {
          id: item.item.id,
          title: item.item.class_name,
          headerImg: item.item.image_url, // 如果需要传递头部图片
          home_flg: true
        };
        const encodedData = encodeURIComponent(JSON.stringify(categoryData));
        uni.navigateTo({
          url: `/pages/mer/tabbar/specialDetails/gift_box_details?categoryData=${encodedData}`
        });
  
        // let index = null;
        // let id = null;
        // item.indexStatus == "2" ? (id = item.item.id) : (index = item.indexOf);
  
        // uni.navigateTo({
        //   url: `/pages/mer/tabbar/categoryLabels/categoryLabels?&index=${item.indexOf}&label_id=${item.item.id}`,
        // });
  
      },
      //今日优惠
      async getPreferential() {
        const res = await this.$request(
          "SmallProgramApi/ShiFu/getHomePageDiscountGoods",
          { store_id: this.$store.mallStoreId, page: 1, limit: 4 }
        );
        let listPrice = res.data.map((item) => {
          let num_discount = parseFloat(item.discount);
          let num_online_price = parseFloat(item.online_price);
          let specialOffer = (num_discount * num_online_price).toFixed(2);
          return {
            ...item,
            specialOffer: specialOffer,
          };
        });
  
        this.listPrice = listPrice;
        console.log(listPrice, "res");
      },
  
      // 获取标签数据
      /**
       * 获取标签
       *
       * 通过调用API获取标签数据，并设置每个标签的背景颜色。
       */
      async getLabel() {
        const result = await this.$request(
          "SmallProgramApi/ShiFu/getHomePageGoodLabel",
          { store_id: this.$store.mallStoreId }
        );
  
        if (result.data) {
          // this.listLabel = result.data;
          // let subtitle = [
          //   "#5BBE68",
          //   "#D37240",
          //   "#5A7ABE",
          //   "#E79B1D",
          //   "#C18C57",
          //   "#BF7156",
          // ]; //副标题颜色
          // this.listLabel.map((item, index) => {
          //   item["colorBack"] = subtitle[index];
          // });
  
          // this.listLabel = result.data;
          let subtitle = [
            "#5BBE68",
            "#D37240",
            "#5A7ABE",
            "#E79B1D",
            "#C18C57",
            "#BF7156",
          ]; //副标题颜色
          this.label_List.map((item, index) => {
            item["colorBack"] = subtitle[index];
          });
          console.log(this.label_List, "label_Listlabel_Listlabel_Listlabel_Listlabel_List");
  
        }
      },
  
      //获取分类导航列表
      async getNavList() {
        const { status, data } = await this.$request(
          "SmallProgramApi/Goods/getGoodsClass_v3",
          { pageSource: 1, store_id: this.$store.mallStoreId }
        );
        if (status == 1) {
          let navList = [];
          if (data.length > 10) {
            let len = 0;
            let arr = [];
            for (let i in data) {
              arr.push(data[i]);
              len++;
              if (len >= 10) {
                navList.push([...arr]);
                len = 0;
                arr = [];
              }
            }
            arr.length && navList.push([...arr]);
          } else if (data.length) {
            navList = [data];
          }
  
          this.navList = navList;
          this.navList[1].forEach((item, index) => {
            item["indexId"] = 10 + index;
          });
  
          this.moreIndex = this.navList[0][0].id
        }
      },
  
      //获取商品数据
      getGoodsList() {
        return new Promise(async (resolve) => {
          if (this.isLoading || !this.canLoad) return resolve(false);
          this.isLoading = true;
          const { status, data, message } = await this.$request(
            "SmallProgramApi/ShiFu/getHomePageGoods",
            {
              // id: this.actLabelId,
              page: this.goodsPage,
              limit: this.goodsLimit,
              store_id: this.$store.mallStoreId,
            }
          );
          if (status != 1)
            return (
              uni.showToast({
                title: message,
                icon: "none",
              }) && resolve(false)
            );
  
          if (this.goodsPage == 1) {
            this.goodsList = data;
          } else {
            this.goodsList.push.apply(this.goodsList, data);
          }
          this.goodsPage++;
          this.canLoad = data.length < this.goodsLimit ? false : true;
  
          this.goodsList.forEach((item) => {
            let matchedItem = this.$store.merShoppingGoodsList.find(
              (el) => el.goods_id === item.id
            );
            if (matchedItem) {
              item.num = matchedItem.num;
            } else {
              this.indexes = [];
              item.num = 0;
            }
          });
  
          this.$nextTick(() => {
            this.isLoading = false;
            resolve(true);
          });
        });
      },
  
      //获取轮播图
      async getBannerList() {
        const { status, data } = await this.$request(
          "SmallProgramApi/ShiFu/getHomePageBanner",
          { store_id: this.$store.mallStoreId }
        );
        if (status == 1) {
          // this.bannerList = data.map((res) => {
          //   if (res.link) {
          //     res.link = JSON.parse(res.link);
          //   }
          //   return res;
          // });
          // this.bannerList =
          //   this.bannerList.length < 2
          //     ? this.bannerListCeshi
          //     : this.bannerList.length;
          this.bannerList = data;
          console.log("轮播图啊", this.bannerList);
        }
      },
      //获取标签列表
      async getLabelList() {
        const { status, data } = await this.$request(
          "SmallProgramApi/BaseSet/getMerchantMallLabel",
          { store_id: this.$store.mallStoreId }
        );
  
        if (status == 1) {
          this.labelList = data;
          if (data.length) {
            this.$nextTick(() => {
              this.$refs.labelRef && (this.$refs.labelRef.marginLeft = 0);
              this.actLabelId = data[0].id;
              this.searchGoods();
            });
          }
          console.log(this.labelList, "获取标签列表");
        }
      },
      //查看商品详情
      // toDetail(id) {
      //   uni.navigateTo({
      //     url: "/pages/mer/goods/details/details?id=" + id,
      //   });
      // },
  
      //下拉刷新
      pullDownRefresh() {
        this.isRefresh = true;
        this.reloadData();
      },
  
      //搜索商品
      async searchGoods() {
        this.goodsPage = 1;
        this.canLoad = true;
        await this.getGoodsList();
      },
  
      //标签跳转
      // handlerClassIcon(link) {
      //   console.log(link.value , '12312321')
      //   this.toPath(link.value);
      // },
  
      //搜索商品
      toSearchGoods() {
        uni.navigateTo({
          url: "/pages/mer/goods/search/search?search=1",
        });
        // uni.navigateTo({
        //         url:'/pages/mer/tabbar/supplier/supplier_form',
        //     });
  
        //  uni.navigateTo({
        //         url:'/pages/order/SecureParcel/SecureParcel',
        //     });
      },
  
      toClassIcon(item) {
        // uni.navigateTo({
        //   url: "/pages/mer/goods/list/list?search=1",
        // });
        let itemList = null;
  
        item === "更多" ? (itemList = this.listLabel[0]) : (itemList = item);
  
        // console.log(itemList.name, 'itemList.nameitemList.nameitemList.name')
        uni.navigateTo({
          url: `/pages/mer/goods/list/list?name=${itemList.name}&type=1&id=${itemList.id}`,
        });
      },
  
      // // 展示plus会员价条件
      // showPlusPrice(item) {
      //   return app.showPlusPrice(item);
      // },
      // // 展示会员价条件
      // showVipPrice(item) {
      //   return app.showVipPrice(item);
      // },
      // // 展示普通价格
      // showOnlinePrice(item) {
      //   return app.showOnlinePrice(item);
      // },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .animated-image {
    width: 70rpx;
    height: 70rpx;
    position: absolute;
    left: 20rpx;
    /* 水平对齐到左边 */
    bottom: 27%;
    animation: move 2s infinite alternate ease-in-out;
  }
  
  @keyframes move {
    0% {
      transform: translateY(0) translateX(0);
    }
  
    50% {
      transform: translateY(-20px) translateX(10px);
    }
  
    100% {
      transform: translateY(0) translateX(0);
    }
  }
  
  .new-lable-container {
    padding: 20rpx;
    background-color: #FFF7F0;
  }
  
  .new-lable-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
  }
  
  .new-lable-item {
    width: 340rpx;
    height: 244rpx;
    border-radius: 12rpx;
    overflow: hidden;
  
    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  </style>
  
  
  <style lang="scss" scoped>
  .ney-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    background-color: #eee;
  
    .left-content {
      border-radius: 20rpx;
      display: flex;
      justify-content: center;
      align-content: center;
  
      image {
        height: 200rpx;
        width: 350rpx;
      }
    }
  
    .right-content {
      border-radius: 20rpx;
      display: flex;
      justify-content: center;
      align-content: center;
  
      image {
        height: 200rpx;
        width: 350rpx;
      }
    }
  }
  </style>
  <style lang="scss" scoped>
  .notice-container {
    padding: 20rpx;
    background-color: #eee;
  }
  
  .notice-content {
    display: flex;
    align-items: center;
    background-color: #FFF7F7;
    padding: 0rpx 24rpx;
    border-radius: 16rpx;
  
    text {
      color: #DA5C47;
      margin-right: 20rpx;
    }
  }
  
  .icon-notice {
    margin-right: 20rpx;
    color: #FF6B6B;
  }
  
  .notice-swiper {
    flex: 1;
    height: 40rpx;
  }
  
  .notice-item {
    color: #FF6B6B;
    font-size: 24rpx;
    line-height: 40rpx;
  }
  </style>
  
  <style lang="scss" scoped>
  .mask-home-img-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  
  .mask-home-img-content {
    position: relative;
    width: 100%;
    // max-width: 640rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(1);
    opacity: 1;
    transition: all 0.3s ease;
  }
  
  .mask-home-img-fade-out {
    opacity: 0;
  }
  
  .mask-home-img-content-fade-out {
    opacity: 0;
    transform: scale(0.8);
  }
  
  .mask-home-img-promo {
    width: 100%;
    border-radius: 16rpx;
  }
  
  .mask-home-img-close-btn {
    position: relative;
    margin-top: 40rpx;
    width: 60rpx;
    height: 60rpx;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40rpx;
    color: grey;
  }
  </style>
  
  
  <style lang="less" scoped>
  .tag-container {
    margin-left: 16rpx;
    display: flex;
    flex-wrap: wrap;
    /* 如果标签过多，自动换行 */
  }
  
  .separator {
    width: 1rpx;
    height: 12rpx;
    /* 分割线的实际高度 */
    background: #9e9e9e;
    margin: 0 10rpx;
    /* 分割线的左右间距 */
    align-self: center;
    /* 使得元素自身居中 */
  }
  
  .today_dis {
    width: 100%;
    overflow-x: scroll;
  }
  
  .animationIcon {
    background: red;
    position: relative;
    top: 440rpx;
    left: 260rpx;
    z-index: 999;
  }
  
  .balt,
  .baltRight {
    position: absolute;
    background: red;
    width: 25rpx;
    height: 25rpx;
    border-radius: 50%;
    z-index: 99999;
  }
  
  .inner,
  .innerRight {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 99999;
  }
  
  .balt {
    animation: moveX 1s 1;
  }
  
  .inner {
    animation: moveY 1s cubic-bezier(1, -1, 1, 10) 1;
  }
  
  .baltRight {
    animation: moveXR 1s 1;
  }
  
  .innerRight {
    animation: moveYR 1s cubic-bezier(1, -1, 1, 10) 1;
  }
  
  @keyframes moveX {
    50% {
      transform: translateX(-190px);
    }
  
    100% {
      transform: translateX(-190px);
    }
  }
  
  @keyframes moveY {
    50% {
      transform: translateY(1000px);
    }
  
    100% {
      transform: translateY(1000px);
    }
  }
  
  @keyframes moveXR {
    50% {
      transform: translateX(100px);
    }
  
    100% {
      transform: translateX(100px);
    }
  }
  
  @keyframes moveYR {
    50% {
      transform: translateY(1000px);
    }
  
    100% {
      transform: translateY(1000px);
    }
  }
  </style>
  
  
  <style lang="less" scoped>
  .show-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0px 16rpx;
  }
  
  .show-item {
    width: 46%;
    margin-bottom: 5px;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fff;
  }
  
  .show-title {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  
    .show-title-head {
      font-size: 16px;
      font-weight: bold;
    }
  }
  
  .show-label {
    font-size: 22rpx;
    color: #fff;
    margin-left: 10px;
  
    height: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 4px;
  }
  
  .show-subtitle {
    font-size: 12px;
    // color: #999;
    margin-bottom: 10px;
  }
  
  .show-image-placeholder {
    display: flex;
    justify-content: space-between;
    width: 100%;
    // height: 70px;
    border-radius: 5px;
  }
  
  .show-inner-image {
    // width: 49%;
    width: 144rpx;
    height: 144rpx;
    border-radius: 5px;
    background-color: #fff;
  }
  
  .show-green .show-inner-image {
    // background-color: #8fd14f;
  }
  
  .show-red .show-inner-image {
    background-color: #ff6b6b;
  }
  
  .show-yellow .show-inner-image {
    background-color: #ffd166;
  }
  
  .show-orange .show-inner-image {
    background-color: #ff8c42;
  }
  </style>
  
  
  <style lang="scss">
  .subbox {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-evenly;
    float: right;
    margin-right: 16rpx;
  
    .subbox_one,
    .subbox_two {
      width: 320rpx;
      height: 144rpx;
    }
  
    .subbox_one {
      background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a6c47ed17c9964.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      position: relative;
  
      .subbox_pos {
        position: absolute;
        left: 20rpx;
        top: 20rpx;
        display: flex;
        flex-direction: column;
      }
  
      .subbox_pos text:nth-child(1) {
        font-size: 40rpx;
        font-weight: bold;
      }
  
      .subbox_pos text:nth-child(2) {
        font-size: 24rpx;
        color: #d37240;
        margin-top: 10rpx;
      }
    }
  
    .subbox_two {
      background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a6c91763e61280.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      position: relative;
  
      .subbox_pos {
        position: absolute;
        left: 20rpx;
        top: 20rpx;
        display: flex;
        flex-direction: column;
      }
  
      .subbox_pos text:nth-child(1) {
        font-size: 40rpx;
        font-weight: bold;
      }
  
      .subbox_pos text:nth-child(2) {
        font-size: 24rpx;
        color: #d37240;
        margin-top: 10rpx;
      }
    }
  }
  
  .shopping {
    margin: 16rpx;
    display: flex;
    justify-content: center;
    align-content: center;
  }
  
  .shopping_back {
    width: 716rpx;
    height: 328rpx;
    background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734056766675b9b3e857c0.png");
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 16rpx;
  }
  
  .prefix-home_center_class {
    padding: 16rpx;
  }
  
  .prefix-container {
    display: grid;
    grid-gap: 20rpx;
    grid-template-columns: repeat(5, 1fr);
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
  }
  
  .prefix-item {
    background-color: #fff;
    border-radius: 16rpx;
    text-align: center;
    /* Center the text */
  }
  
  .prefix-img {
    width: 100%;
    position: relative;
    padding-top: 100%;
    /* 1:1 aspect ratio */
  }
  
  .prefix-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16rpx;
  }
  
  .prefix-font_icon {
    font-size: 22rpx;
    margin-bottom: 16rpx;
  }
  
  .address_ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 24rpx;
    font-weight: normal;
  }
  
  /*** 已售空***/
  .class-goods-img {
    position: absolute;
    top: 100rpx;
    left: 100rpx;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 28rpx;
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .class_button {
    all: unset;
    display: inline-block;
    background: var(--primary-color);
    border-radius: 50%;
    width: 46rpx;
    height: 48rpx;
    display: flex;
    align-content: center;
    justify-content: center;
    color: white;
    font-size: 40rpx;
    line-height: 41rpx;
    text-align: center;
    transition: transform 0.3s;
  }
  
  .goods-list-box {
    padding: 16rpx 16rpx;
    box-sizing: border-box;
    // margin-top: 28rpx;
    // column-count: 2;
    // column-gap: 16rpx;
  
    .goods-item {
      // break-inside: avoid;
      width: 355rpx;
      margin-bottom: 16rpx;
      background-color: #ffffff;
      border-radius: 16rpx;
      min-width: 40%;
      padding-bottom: 16rpx;
      border: 1rpx solid #f5f5f5;
      box-sizing: border-box;
      overflow: hidden;
  
      .goods-name {
        width: 316rpx;
        height: 76rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* 缩短并限制在一个确定的行数 */
        overflow: hidden;
        text-overflow: ellipsis;
        /* 文本溢出时添加省略号 */
        word-wrap: break-word;
        /* 单词过长会在词间换行 */
        white-space: normal;
        /* 允许正常换行 */
        font-size: 28rpx;
        font-family: ".PingFang SC-Regular", Arial, sans-serif;
        font-weight: bold;
        line-height: 36rpx;
        margin-left: 16rpx;
        margin-top: 16rpx;
      }
  
      .goods-price-box {
        font-size: 32rpx;
        line-height: 36rpx;
        margin-left: 20rpx;
      }
  
      .add-car-icon {
        color: var(--primary-color);
        font-size: 52rpx;
        margin-right: 20rpx;
        margin-bottom: 14rpx;
      }
    }
  }
  
  .content {
    flex-grow: 1;
    overflow: auto;
  }
  
  .tabbar {
    flex-shrink: 0;
  }
  
  .qh-tabbar-page-view {
    padding-bottom: 44px;
  }
  
  .fixed-header {
    // background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a1ce0154f25058.png");
    // background-color: #fff;
    // background-repeat: no-repeat;
    // background-size: cover;
    // background-position: center;
    position: flex;
    top: 0;
    z-index: 9;
  }
  
  .header_img {
    height: calc(264rpx + var(--safe-area-top, 20px));
    width: 100%;
    background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a1ce0154f25058.png");
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: fixed;
    left: 0;
    top: 0;
    transition: opacity 1s;
  }
  
  .qh-scroll-view {
    // height: 100vh;
    /*或者一个适当的值*/
  }
  
  .backGround {
    background-color: #eee;
  }
  
  .font_icon {
    font-size: 24rpx;
    font-family: ".PingFang SC-Regular", Arial, sans-serif;
    font-weight: bold;
  }
  
  .home_label {
    width: 716rpx;
    height: 512rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-left: 16rpx;
    margin-right: 16rpx;
    display: grid;
    //   grid-template-columns: repeat(4, 1fr);
    //   grid-template-rows: repeat(4, 1fr);
    grid-gap: 0px;
  
    .text_font_size {
      font-family: ".PingFang SC-Regular", Arial, sans-serif;
      font-weight: bold;
      color: #000;
      font-size: 28rpx;
    }
  
    .div0 {
      grid-area: 1 / 1 / 3 / 2;
      margin-left: 12rpx;
      margin-top: 12rpx;
      margin-right: 12rpx;
  
      img {
        all: unset;
        width: 220rpx;
        height: 316rpx;
      }
  
      text {
        position: absolute;
        top: 16rpx;
        left: 24rpx;
      }
    }
  
    .div1 {
      margin-top: 12rpx;
      margin-right: 12rpx;
      margin-bottom: 12rpx;
      grid-area: 1 / 2 / 2 / 4;
  
      img {
        all: unset;
        width: 456rpx;
        height: 152rpx;
      }
    }
  
    .div2 {
      margin-right: 12rpx;
      grid-area: 2 / 2 / 3 / 3;
    }
  
    .div3 {
      margin-right: 12rpx;
  
      grid-area: 2 / 3 / 3 / 4;
    }
  
    .div4 {
      margin-left: 12rpx;
      margin-right: 12rpx;
      grid-area: 3 / 1 / 4 / 1;
  
      text {
        position: absolute;
        top: 16rpx;
        left: 24rpx;
      }
    }
  
    .div5 {
      margin-right: 12rpx;
      grid-area: 3 / 2 / 4 / 2;
    }
  
    .div6 {
      margin-right: 12rpx;
      grid-area: 3 / 3 / 4 / 3;
    }
  
    .div4,
    .div5,
    .div6 {
      margin-top: 12rpx;
      margin-bottom: 12rpx;
    }
  
    .div2,
    .div3,
    .div4,
    .div5,
    .div6 {
      img {
        all: unset;
        width: 220rpx;
        height: 152rpx;
      }
    }
  
    .div0,
    .div1,
    .div2,
    .div3,
    .div4,
    .div5,
    .div6 {
      position: relative;
    }
  
    .textName {
      position: absolute;
      top: 16rpx;
      left: 16rpx;
    }
  }
  
  .home_today {
    display: flex;
  
    .today_left {
      border-radius: 16rpx;
      margin-left: 16rpx;
      margin-right: 16rpx;
      margin-bottom: 16rpx;
  
      background: linear-gradient(to bottom, #fddeca, #fff9f5);
      width: 502rpx;
      height: 226rpx;
  
      .img_icon {
        margin: 6rpx 11rpx;
  
        image {
          width: 104rpx;
          height: 100rpx;
          border-radius: 16rpx;
        }
  
        .today_price {
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 18rpx;
          background-color: red;
          color: #fff;
          font-size: 18rpx;
          width: 80rpx;
          height: 28rpx;
          margin-left: 12rpx;
          text-align: center;
        }
      }
    }
  
    .today_right {
      width: 204rpx;
      height: 226rpx;
      margin-bottom: 16rpx;
      border-radius: 16rpx;
      background: linear-gradient(to bottom, #fddeca, #fff9f5);
      position: relative;
  
      .img_icon {
        margin: 16rpx;
  
        image {
          width: 172rpx;
          height: 172rpx;
          margin-left: 10rpx;
        }
  
        .today_price {
          border-radius: 18rpx;
          background-color: #ff782a;
          color: #fff;
          text-align: center;
          position: absolute;
          bottom: 10rpx;
          right: 35rpx;
          width: 112rpx;
          height: 28rpx;
          font-size: 20rpx;
          font-family: ".PingFang SC-Regular", Arial, sans-serif;
          font-weight: bold;
        }
      }
    }
  }
  
  .home_center_calss {
    // height: 332rpx;
    // background: #fff;
    // border-radius: 16rpx;
    // margin-left: 16rpx;
    // margin-right: 16rpx;
    // margin-bottom: 16rpx;
  
    .class_icon {
      display: contents;
      width: 100%;
  
      .class_icon_img {
        width: 108rpx;
        height: 108rpx;
        text-align: center;
      }
  
      image {
        width: 108rpx;
        height: 108rpx;
      }
    }
  }
  
  .home_class {
  
    // padding-top: 16rpx;
    // padding-top: 16rpx;
    .home_icon {
      // margin-left: 16rpx;
      // margin-right: 16rpx;
      // margin-bottom: 16rpx;
  
      width: 716rpx;
      height: 145rpx;
      background: #fff;
      // border-radius: 16rpx;
      display: flex;
  
      .min_cion {
        display: inline-block;
        width: 130rpx;
        height: 120rpx;
        text-align: center;
        margin-top: 20rpx;
  
        image {
          width: 64rpx;
          height: 64rpx;
        }
      }
    }
  }
  
  //轮播样式
  .banner-box {
    background: #eee;
    padding-top: 8px;
  
    // padding-top: 120rpx;
    .banner-bg {
      position: absolute;
      width: 100%;
      // calc(var(--status-bar-height) + 470rpx )  只针对app-PLUS
      //背景颜色渐变效果
      // background-image: linear-gradient(red 50%,#FFF) ;
      // 过度效果
      transform: 0.5s;
    }
  
    .banner-swipper {
      width: 100%;
      height: 302rpx;
  
      .swiper-item {
        width: 100%;
        height: 100%;
  
        image {
          width: 716rpx;
          height: 302rpx;
          border-radius: 15rpx;
          object-fit: contain;
          /* 图片适应容器，保持宽高比 */
          box-sizing: border-box;
          /* 确保内边距不会改变容器的大小 */
        }
      }
    }
  }
  
  .title_font {
    margin-left: 24rpx;
    font-size: 40rpx;
    font-weight: 600;
  }
  
  .hide-ali-back {
    width: 80rpx;
    height: 72rpx;
  }
  
  .search-box {
    position: sticky;
    top: 0;
    // margin: 16rpx 24rpx;
    border: 1px solid #f5f5f5;
  
    /* #ifdef MP-WEIXIN */
    margin-left: 24rpx;
    /* #endif */
    /* #ifdef MP-ALIPAY */
    width: 400rpx;
    /* #endif */
    height: 66rpx;
    background-color: #ffffff;
    border-radius: 34rpx;
    padding-left: 10rpx;
  
    box-sizing: border-box;
    line-height: 32rpx;
  
    .search-icon {
      font-size: 28rpx;
      color: #999999;
    }
  
    .search-text {
      font-size: 28rpx;
      color: #999999;
      margin-left: 12rpx;
    }
  
    .search-button {
      // background-color: #93d934;
      color: #000;
      border-radius: 20px;
      height: 56rpx;
      width: 122rpx;
      line-height: 56rpx;
      margin-left: auto;
      text-align: center;
      font-size: 28rpx;
    }
  }
  
  .top-nav-box {
    color: #ffffff;
    background-color: var(--primary-color);
    padding: 0 24rpx 16rpx;
  
    .pisition-icon {
      font-size: 26rpx;
      color: #ffffff;
    }
  
    .user-position {
      font-size: 30rpx;
      line-height: 32rpx;
      max-width: 272rpx;
      margin: 0 16rpx 0 10rpx;
    }
  
    .pisition-right-icon {
      font-size: 18rpx;
    }
  
    .top-nav-right-icon {
      font-size: 44rpx;
    }
  
    .top-nav-right-text {
      font-size: 20rpx;
      line-height: 20rpx;
      margin-top: 10rpx;
    }
  
    .mar-l-38 {
      margin-left: 38rpx;
    }
  }
  
  .home-box {
    // border-radius: 20rpx 20rpx 0 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
  
    .swiper-box {
      height: 272rpx;
      margin: 24rpx 24rpx 0;
      /* #ifdef MP-ALIPAY */
      width: calc(100% - 48rpx);
      /* #endif */
      box-sizing: border-box;
  
      .swiper-image {
        // display: block;
        width: 100%;
        height: 272rpx;
      }
    }
  
    .nav-box {
      margin-top: 26rpx;
      height: 352rpx;
  
      .nav-swiper-box {
        width: 730rpx;
        height: 100%;
      }
  
      .nav-item-box {
        width: 684rpx;
        margin: 0 auto;
      }
  
      .nav-item {
        width: 100rpx;
        margin-left: 46rpx;
        margin-bottom: 36rpx;
  
        &:nth-child(5n + 1) {
          margin-left: 0;
        }
  
        .nav-image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }
  
        .nav-text {
          font-size: 24rpx;
          color: #333333;
          line-height: 24rpx;
          margin-top: 16rpx;
          text-align: center;
        }
      }
    }
  }
  </style>
  